<template>
  <div class="app-container" v-loading="loading">
    <el-table
      v-show="tableType == '1'"
      :data="castingTableData"
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        v-for="(item, index) in castingColumn"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <!-- 为了处理需要百分比展示的值，但是后端返回值为null，需要前端处理为-展示 -->
        <template v-if="item.rate" #default="scope">
          <span v-if="scope.row[item.prop] || scope.row[item.prop] == 0">
            {{ scope.row[item.prop] }}%
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-show="tableType == '2'"
      :data="rollTableData"
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column label="卷制总数量(支)" prop="rollTotalQty" />
      <el-table-column label="卷制合格数(支)" prop="rollPassQty" />
      <el-table-column label="气检合格数(支)" prop="gasInspectPassQty" />
      <el-table-column label="卷制合格率" prop="rollPassRate" />
      <el-table-column label="气检合格率" prop="gasInspectPassRate" />
      <el-table-column label="水测合格率" prop="waterInspectPassRate" />
    </el-table>
    <el-table
      v-show="tableType == '3'"
      :data="waterVaporTableData"
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column label="水(t)">
        <el-table-column label="自来水" prop="tapWater" />
        <el-table-column label="RO水" prop="roWater" />
        <el-table-column label="制水比" prop="prodWaterRate" />
        <el-table-column label="外排市政" prop="municipalDischarge" />
        <el-table-column label="中水回用" prop="waterReuse" />
      </el-table-column>
      <el-table-column label="电(度)">
        <el-table-column label="总电量" prop="totalEleConsumption" />
      </el-table-column>
      <el-table-column label="气(m2)">
        <el-table-column label="总气量" prop="totalGasConsumption" />
      </el-table-column>
      <el-table-column label="物料回收(t)">
        <el-table-column label="10% DMF量" prop="dmfQty" />
        <el-table-column label="浓缩处理量" prop="concentrateHandleQty" />
        <el-table-column label="浓处理比%" prop="concentrateHandleRate" />
        <el-table-column label="精馏处理量" prop="distillateHandleQty" />
        <el-table-column label="精处比%" prop="distillateHandleRate" />
      </el-table-column>
      <el-table-column label="生化系统库容情况(t)">
        <el-table-column label="生化库容3200t" prop="biochemistryQty" />
        <el-table-column label="应急库容2000t" prop="emergencyQty" />
        <el-table-column label="消防库容800t" prop="fireQty" />
        <el-table-column label="事故库容1500t" prop="accidentQty" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="Data">
import castingColumns from "./column";
import { ref, toRefs, watch } from "vue";
const tableType = ref("1");
const parentType = ref("add");
const loading = ref(false);
const castingTableData = ref(false);
const rollTableData = ref(false);
const waterVaporTableData = ref(false);
const props = defineProps(["datas"]);
const { datas } = toRefs(props);
const castingColumn = ref([]);

watch(
  datas,
  (val) => {
    if (datas.value) {
      tableType.value = val?.prodIndexType || "1";
      parentType.value = val?.parentType || "add";
      console.log(datas);

      if (tableType.value == "1") {
        // 铸膜
        castingTableData.value = [val?.prodIndexCastFilmDto || {}];
        castingColumn.value = val.sectionType ? castingColumns[val.sectionType] : [];
      }
      if (tableType.value == "2") {
        // 卷膜
        rollTableData.value = [val?.prodIndexRollDto || {}];
      }
      if (tableType.value == "3") {
        // 水汽
        waterVaporTableData.value = [val?.prodIndexWaterVaporDto || {}];
      }
    }
  },
  { deep: true }
);

defineExpose({ castingTableData, rollTableData, waterVaporTableData });
</script>
<style lang="scss" scoped></style>
